<!--
 * @Description: 角色管理
 * @Author: fxg
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-08-27 10:02:20
-->
<template>
  <div class="pages_content table business">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <transition name="from"></transition>
            <span v-show="!showCardNav">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </span>
            <transition name="to"></transition>
            <span v-show="showCardNav">
              <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
            </span>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px">名称</span>
                <el-input v-model="tableParam.name" style="width: 200px" clearable placeholder="请输入"  @keyup.enter.native="queryPage()"/>
              </span>
              <span style="margin-left: 24px">
                <span style="margin-right: 12px">编码</span>
                <el-input v-model="tableParam.code" style="width: 200px" clearable placeholder="请输入"  @keyup.enter.native="queryPage()"/>
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), queryPage()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" @click="reset()">重 置</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_nav">
            <div>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANJIA'))!==-1" size="small" class="bottom_all" style="margin-left: 0" @click="add()">
                <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
                添加
              </el-button>
              <!-- <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHANCHU'))!==-1" disabled size="small" class="bottom_two" @click="batchUpdateOrDelete('update_status', 0)">
                <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
                删除
              </el-button> -->
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='RIYONG'))!==-1" size="small" class="bottom_three" @click="batchUpdateOrDelete('update_enable', 1)">
                <i class="icon iconfont iconicon_button_startuse" style="font-size: 12px"></i>
                启用
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='JINYONG'))!==-1" size="small" class="bottom_four" @click="batchUpdateOrDelete('update_enable', 0)">
                <i class="icon iconfont iconicon_button_disable1" style="font-size: 12px"></i>
                禁用
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='FENPYY'))!==-1" size="small" class="botton_five" @click="distributionGet()">分配用户</el-button>
            </div>
            <div>
              <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='BAOCUNPXH'))!==-1" :underline="false" @click="updateSortNum()">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_sort1"></i>
                </span>
                保存排序号
              </el-link>
              <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px">
                <el-link :underline="false">
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_filtrate"></i>
                  </span>
                  筛选
                </el-link>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in table" :key="index">
                    <el-checkbox v-model="item.status">{{
                      item.label
                      }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAOCHU'))!==-1" :underline="false" @click="$Download(DownloadURL, tableParam)">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_export1"></i>
                </span>
                导出
              </el-link>
            </div>
          </div>
          <div class="card_info" :style="style">
            <el-table ref="multipleTable" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <el-table-column align="center" type="selection" width="50" :selectable="selectableFun"></el-table-column>
              <template v-for="(item, index) in table">
                <el-table-column v-if="item.status" :key="index" :label="item.label" align="center" :width="item.width" :fixed=" item.label =='操作'?'right':false">
                  <template slot-scope="scope">
                    <span v-if="scope.row.enable == 0 && item.label == '状态'" style="color: #969799">禁用</span>
                    <span v-if="scope.row.enable == 1 && item.label == '状态'" style="color: #00a754">启用</span>
                    <span v-if="
                        scope.row.checkProcess == 0 &&
                        item.label == '是否流程选择'
                      " style="color: #969799">否</span>
                    <span v-if="
                        scope.row.checkProcess == 1 &&
                        item.label == '是否流程选择'
                      " style="color: #00a754">是</span>
                    <span v-if="
                        scope.row.checkProcess == 0 &&
                        item.label == '是否支持对外授权'
                      " style="color: #969799">否</span>
                    <span v-if="
                        scope.row.checkProcess == 1 &&
                        item.label == '是否支持对外授权'
                      " style="color: #00a754">是</span>
                    <el-button v-if="item.label == '操作'&&ButtonList.findIndex(res=>(res.buttonValue=='XIUGAI'))!==-1" class="bottom_one" size="mini" @click="update(scope.row)">

                      修改
                    </el-button>
                    <div v-if="item.label == '排序号'">
                      <el-input v-model="scope.row.sortNum"></el-input>
                    </div>
                    <span v-if="
                        item.label !== '操作' &&
                        item.label !== '排序号' &&
                        item.label !== '状态' &&
                        item.label !== '是否支持对外授权' &&
                        item.label !== '是否流程选择'
                      ">{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @current-change="queryPage()" @size-change="sizeChange"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="queryPage()">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" width="680px" :close-on-click-modal="false" :before-close="resefrom">
      <span slot="title" class="dialog-title">{{ dialogtitle }}</span>
      <div class="dialoginfo dialogVisible">
        <el-form ref="dialogForm" :rules="rules" :inline="true" :model="from" label-width="90px">
          <el-form-item prop="name">
            <span slot="label" style="color: #ff0000">名称</span>
            <el-input v-model="from.name" placeholder="请输入" clearable :disabled="!selectableFun(from)"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <span slot="label" style="color: #ff0000">编码</span>
            <el-input v-model="from.code" placeholder="请输入" :disabled="!selectableFun(from)" clearable></el-input>
          </el-form-item>
          <el-form-item prop="systemId">
            <span slot="label" style="color: #ff0000">所属系统</span>
            <el-select v-model="from.systemId" placeholder="请选择" :disabled="!selectableFun(from)">
              <el-option v-for="item in sysoptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">类别</span>
            <el-select v-model="from.typeId" placeholder="请选择" :disabled="!selectableFun(from)">
              <el-option v-for="item in typeoptions" :key="item.id" :label="item.itemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="sortNum">
            <span slot="label">排序号</span>
            <el-input v-model="from.sortNum" placeholder="请输入排序号" type="Number" clearable />
          </el-form-item>
          <div>
            <el-form-item prop="checkProcess" label-width="110px">
              <span slot="label">是否流程选择</span>
              <el-radio-group v-model="from.checkProcess">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div>
            <el-form-item prop="foreignGrant" label-width="110px">
              <span slot="label">是否对外授权</span>
              <el-radio-group v-model="from.foreignGrant">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <el-form-item label="状态" prop="enable">
            <el-radio-group v-model="from.enable" :disabled="!selectableFun(from)">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="系统描述" prop="description">
            <el-input v-model="from.description" placeholder="请填写系统描述" class="textarea" type="textarea" resize="none" rows="5"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resefrom()">取 消</el-button>
        <el-button class="bottom_all" @click="save()">确 定</el-button>
      </span>
    </el-dialog>
    <!--分配用户-->
    <el-dialog :visible.sync="distribution" width="1072px" :close-on-click-modal="false" :before-close="handleDistClose">
      <span slot="title" class="dialog-title">分配用户</span>
      <div v-loading='loading' class="dialoginfo distribution" style="padding: 0">
        <div class="dialoginfo-title-bg">
          <div class="dialoginfo-title">
            <div :class="distributionModule == 0 ? 'active' : 'none'" @click="handleSwitch(0)">
              <div>
                用户
                <i class="iconfont iconicon_right"></i>
                角色
              </div>
            </div>
            <div :class="distributionModule == 1 ? 'active' : 'none'" @click="handleSwitch(1)">
              <div>
                角色
                <i class="iconfont iconicon_right"></i>
                用户
              </div>
            </div>
          </div>
        </div>
        <div class="dialoginfo-info" :style="{'flex-direction': distributionModule==0?'row':'row-reverse'}">
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title">用户</div>
            <el-input v-model="userSeachKey" placeholder="请输入用户姓名" prefix-icon="el-icon-search" style="padding: 5px;" @input="handleSearchUser">
            </el-input>
            <!-- <div class="dialoginfo-info-info">
              <div v-for="(item, index) in leftData" :key="index" class="user" @click="handleLeftChosen(item, index)">
                <span :class="index == leftIndex ? 'user-active' : ''">{{
                  item.name + (item.organizationShowInfo ? ('——' + item.organizationShowInfo) : '')
                  }}</span>
              </div>
            </div> -->
            <div class="dialoginfo-info-info">
              <el-tree ref="tree" check-on-click-node class="tree-line" :indent="0" :data="treeArry" :show-checkbox='distributionModule===1' node-key="id" highlight-current :props="defaultProps" @node-click='handleClick' @check-change='handleCheckChange' ></el-tree>
            </div>
          </div>
          <div class="dialoginfo-info-center"></div>
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title">角色</div>
            <el-input v-model="roleSeachKey" style="padding: 5px;" placeholder="请输入角色" prefix-icon="el-icon-search">
            </el-input>
            <div class="dialoginfo-info-info">
              <el-checkbox-group v-if="distributionModule===0" v-model="distSelectedIds">
                <div v-for="(item, index) in rightData" :key="index" class="user">
                  <el-checkbox :label="item.id" @change="handleRightChosen">
                    {{item.name + (item.organizationShowInfo ? ('——' + item.organizationShowInfo) : '')}}
                  </el-checkbox>
                </div>
              </el-checkbox-group>
              <el-radio-group v-if="distributionModule===1" v-model="distSelectedId">
                <div v-for="(item, index) in rightData" :key="index" class="user">
                  <el-radio :label="item.id" @change="handleChange">
                    {{item.name + (item.organizationShowInfo ? ('——' + item.organizationShowInfo) : '')}}
                  </el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" size="medium" @click="handleDistClose()">取 消</el-button>
        <el-button class="bottom_all" size="medium" :disabled="distSubmitList.length === 0" @click="handleSave()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import breaDcrumb from "@/components/breadcrumb";
import { mapGetters } from "vuex";
import {
  queryPage,
  saveOrUpdate,
  batchUpdateOrDelete,
  updateSortNum,
  getopList,
  rusaveOrUpdate, Download,
} from "@/api/basedata/role.js";
import { getSystemlist } from "@/api/basedata/business.js";
import { getDicType } from "@/api/common.js";
import { formatTreeData } from "@/utils/utils";
export default {
  components: {
    breaDcrumb,
  },
  data() {
    return {
      DownloadURL: Download,
      allRoles: [],
      leftData: [],
      rightData: [],
      alllistop: [],
      allindex: null,
      distSelectedIds: [],
      distSelectedId: '',
      leftIndex: null,
      userSeachKey: '',    // 搜索配置参数
      roleSeachKey: '',
      distSubmitList: [],
      /*分配用户*/
      distributionModule: 0,
      /*分配用户弹窗*/
      distribution: false,
      /*添加修改弹窗*/
      dialogVisible: false,
      dialogtitle: "添加角色",
      sysoptions: [],
      typeoptions: [],
      /*弹要修改过着添加的数据*/
      from: {
        name: "",
        code: "",
        description: "",
        enable: '1',
        systemId: "",
        typeId: "",
        checkProcess: 1,
        foreignGrant: 1,
        sortNum: "",
        roleEentrance: "entrance_manager",
      },
      defaultProps: {
        children: "children",
        label: "name",
      },
      /*判断收起展开*/
      showCardNav: true,
      /*搜索关键字段*/
      /*列表展示*/
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入编码", trigger: "blur" }],
        systemId: [
          { required: true, message: "请选择系统", trigger: "change" },
        ],
        phoneNum: [{ required: true, message: "请输入电话", trigger: "blur" }],
      },
      table: [
        { label: "编码", width: "auto", prop: "code", status: true },
        { label: "名称", width: "auto", prop: "name", status: true },
        { label: "描述", width: "auto", prop: "description", status: true },
        { label: "所属系统", width: "auto", prop: "systemName", status: true },
        { label: "类别", width: "auto", prop: "typeName", status: true },
        {
          label: "是否流程选择",
          width: "auto",
          prop: "checkProcess",
          status: true,
        },
        {
          label: "是否支持对外授权",
          width: "160",
          prop: "foreignGrant",
          status: true,
        },
        { label: "排序号", width: "auto", prop: "sortNum", status: true },
        { label: "状态", width: "auto", prop: "enable", status: true },
        { label: "操作", width: "auto", prop: "", status: true },
      ],
      /*列表选中的数据集*/
      tableParam: {
        page: 1,
        pageSize: 10,
        code: "",
        name: "",
        roleEentrance: "entrance_manager",
      },
      total: 0,
      ids: [],
      sortIds: [],
      tableData: [],
      ButtonList: [],
      userList: [],
      treeArry: [],
      allData: [],
      userId: '',
      roleId: '',
      loading: false,
    };
  },
  beforeCreate() {
    getSystemlist().then((res) => {
      this.sysoptions = res.data;
    });
    getDicType({ code: "role" }).then((res) => {
      this.typeoptions = res.data.items;
    });
  },
  mounted() {
    this.ButtonList = this.$ButtonList()
    this.queryPage();
    this.initOrganization();
  },
  watch: {
    roleSeachKey(value) {
      if (value) {
        this.rightData = this.allRoles.filter(item => item.name.indexOf(value) > -1);
        return
      }
      this.rightData = this.allRoles
    },
  },
  methods: {
    initOrganization () {
      const { state } = this.$store;
      if (!state.approvePerson.orgList || !state.approvePerson.orgList) {
        const orgPromise = this.$store.dispatch("approvePerson/getorg");
        const userPromise = this.$store.dispatch("approvePerson/getuser");
        this.loading = true;
        Promise.all([orgPromise, userPromise]).then(([orgres, userres]) => {
          this.formatDataSource(orgres, userres);
        }).catch(e => console.log(e));
      } else {
        this.formatDataSource( state.approvePerson.orgList, state.approvePerson.userList)
      }
    },
    formatDataSource (orgList, userList) {
      orgList.forEach((v) => {
        v.type = 2
      })
      userList.forEach((v) => {
        v.type = 1
      })
      const newArry = userList.map((item) => ({
        ...item,
        parentId: item.organizationId,
      }));
      this.userList = userList;
      this.treeArry = formatTreeData(
        orgList.concat(newArry),
        "id",
        "parentId",
        "children",
        "parent_id"
      );
      this.allData = formatTreeData(
        orgList.concat(newArry),
        "id",
        "parentId",
        "children",
        "parent_id"
      );
      this.loading = false;
    },
    handleClick (data) {
      if (data.type === 1) {
        this.userId = data.id;
        if (this.distributionModule !== 0) {
          return
        }
        let params = {
          type: 'user_to_role',
          sourceId: data.id,
        };

        this.rightData = []
        getopList(params).then((res) => {
          let baseData = []
          this.distSelectedIds = res.data;
          if (this.distributionModule === 0) {
            // 拷贝角色列表
            baseData = JSON.parse(JSON.stringify(this.allRoles));
            this.roleSeachKey = ''
          } else {
            this.userSeachKey = ''
          }
          this.rightData = baseData;
        });
      }
    },
    handleCheckChange (data, check) {
      if (this.distributionModule === 0) return
      if (data.type === 1) {
        const id = data.id;
        let isNotFound = true;  // 没有找对需要处理的数据
        if (check) {
          // 选择
          this.distSubmitList.forEach((item, index) => {
            if (item.userId === id && item.status === 0) {
              this.distSubmitList.splice(index, 1);
              isNotFound = false;
            }
          })
        } else {
          this.distSubmitList.forEach((item, index) => {
            if (item.userId === id) {
              this.distSubmitList.splice(index, 1);
              isNotFound = false;
            }
          })
        }
        if (isNotFound) {
          this.setDistItem(id, check ? 1 : 0);
        }
      }
    },
    handleSwitch(index) {
      this.distributionModule = index;
      this.leftIndex = -1;
      this.userSeachKey = ''
      this.roleSeachKey = ''
      // 切换数据
      if (index === 0) {
        this.handleSearchUser()
      } else {
        this.rightData = this.allRoles;
        this.handleSearchUser()
      }
    },
    handleChange (value) {
      this.roleId = value;
      let params = {
        type: 'role_to_user',
        sourceId: value,
      };
      getopList(params).then((res) => {
        if (res.code === 1001) {
          this.$refs.tree.setCheckedKeys(res.data);
        }        
      });
    },
    handleRightChosen(val, event) {
      const id = event.target.defaultValue;
      let keyName = 'userId'
      if (this.distributionModule === 0) {
        keyName = 'roleId'
      }
      let isNotFound = true;  // 没有找对需要处理的数据

      /**
       * val : true 表示添加，但是如果status == 0,表示操作了减，可以直接删除减操作即可，否则直接加
       * false 表示删除，如果没有找到添加对象，说明是要传status=0，否则直接删除即可
       * @param  {[type]} val [description]
       * @return {[type]}     [description]
       */
      if (val) {
        // 选择
        this.distSubmitList.forEach((item, index) => {
          if (item[keyName] === id && item.status === 0) {
            this.distSubmitList.splice(index, 1);
            isNotFound = false;
          }
        })
      } else {
        this.distSubmitList.forEach((item, index) => {
          if (item[keyName] === id) {
            this.distSubmitList.splice(index, 1);
            isNotFound = false;
          }
        })
      }

      if (isNotFound) {
        this.setDistItem(id, val ? 1 : 0);
      }
    },
    setDistItem(id, status) {
      let item;
      if (this.distributionModule === 0) {
        item = {
          userId: this.userId,
          type: this.rightData.find(item => item.id === id).typeName,
          roleId: id
        }
      } else {
        item = {
          roleId: this.roleId,
          userId: id
        }
      }
      item.status = status;
      this.distSubmitList.push(item)
    },
    /*上传绑定关系*/
    handleSave() {
      const filterData = this.distSubmitList.filter(item => item.type === '首页角色');
      if (filterData.length > 1) {
        this.$message.warning('该用户设置的首页角色不能超过2个');
        return
      }
      rusaveOrUpdate(this.distSubmitList).then((res) => {
        if (res.code === 1001) {
          this.$message.success('角色添加成功');
          this.handleDistClose();
        }
      });
    },
    handleDistClose() {
      this.alllist = [];
      this.alllistop = [];
      this.allindex = null;
      this.distSelectedIds = [];
      this.options = [];
      this.leftIndex = null;
      this.distribution = false;
    },
    /*获取角色和用户列表*/
    distributionGet() {
      const data = {
        page: 1,
        pageSize: 100000,
      };
      /*角色：因角色数据量少，比较固定*/
      queryPage({ ...data, roleEentrance: "entrance_manager", enable: 1 }).then(
        (res) => {
          this.allRoles = res.data.data;
        }
      );
      this.distribution = true;
      this.distSubmitList = [];
      this.rightData = [];
      this.distributionModule = 0;
      this.handleSearchUser();
    },
    handleSearchUser() {
      if (this.userSeachKey) {
        const newData = this.userList.filter(item => item.name.indexOf(this.userSeachKey) > -1);
        this.treeArry = newData;
        return
      }
      this.treeArry = this.allData;
    },
    /*更新排序号*/
    updateSortNum() {
      const sorts = []
      this.tableData.forEach((v) => {
        sorts.push({ id: v.id, sortNum: v.sortNum })
      })
      updateSortNum(sorts).then((res) => {
        if (res.code === 1001) {
          this.$message.success('更新成功')
          this.queryPage();
        }
      });
    },
    /*重置*/
    reset() {
      this.tableParam.code = "";
      this.tableParam.name = "";
      this.queryPage();
    },
    /*删除，禁用，启用，排序*/
    batchUpdateOrDelete(type, status) {
      if (this.ids.length == 0) {
        this.$message({
          message: "请选择要操作的数据项",
          type: "warning",
        });
        return;
      }
      if (type === "update_status") {
        this.$confirm("此操作将永久删除该信息?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        })
          .then(() => {
            batchUpdateOrDelete({
              ids: this.ids,
              status: status,
              type: type,
            }).then(() => {
              this.reset();
            });
          })
          .catch(() => { });
      } else {
        batchUpdateOrDelete({
          ids: this.ids,
          status: status,
          type: type,
        }).then(() => {
          this.queryPage();
        });
      }
    },
    /*保存或修改*/
    save() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          saveOrUpdate(this.from).then((res) => {
            if (res.code === 1001) {
              this.resefrom();
              this.queryPage();
              this.$message.success('操作成功');
            }
          });
        }
      });
    },
    resefrom() {
      this.dialogVisible = false;
      this.$refs.dialogForm.resetFields();
    },
    /*获取列表*/
    queryPage() {
      queryPage(this.tableParam).then((res) => {
        this.total = res.data.totalRows;
        this.tableData = res.data.data;
      });
    },
    add() {
      this.dialogtitle = "添加角色";
      this.$data.from = this.$options.data().from;
      setTimeout(() => {
        this.$refs.dialogForm.clearValidate();
      }, 10);
      this.dialogVisible = true;
    },
    update(data) {
      let str = JSON.stringify(data);
      this.from = JSON.parse(str);
      this.from.enable = JSON.stringify(data.enable);
      delete this.from.updateTime;
      delete this.from.createTime;
      this.dialogtitle = "修改角色";
      this.dialogVisible = true;
      str = null;
    },
    /*批量选择*/
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.ids = [];
      this.sortIds = [];
      val.forEach((item) => {
        this.ids.push(item.id);
        this.sortIds.push({ id: item.id, sortNum: item.sortNum });
      });
    },
    selectableFun(row) {
      //这几个角色不能删除
      let arr = [
        '12b2f6ff304148fd89141e9faa9afb96',
        '48d84b503be7484ca1b5c2eade1ff004',
        '159c04ddb13d47e698dd49440fb144ad',
        'e50bee5031774a9dafb7216a1c4344f4',
        'a8f16dc03d73445b8de3e2d055154fde',
        '8c9a2fc9f59044dcba355366b3a068db',
        '3e32ac0a1e95449d91d80bd97bd30ec7',
        'd88f92f475464fabac873ab70ed4e9f9',
        '5b1ca600fb4f4a7e898506bc803449f6',
        'dac1d5d7b65e4751b625b341808ab493',
        '1687e52bdb9a44baacb9714cc16b5b82',
        'bfb6061a1be143fab3497542a203d100',
        'e92df33754444146b8e063b9d17ee99b',
        '22355b8155c24a458b7c32800e4bd8f9',
        '7605679267385344',
        '87b62423cc0c4a1c9a775a08d9bf29e4',
        '7331806d50c74bb6bf033886a4468603',
        'e0f2599ee6c840a58213af21e2a46a76',
        '560bedbaf7b64913b514e8ea96aeca9e',
        'f66da93bd8634217bdfba8028678f1b4',
        '12719832957063168',
        '2a646d33683c4afcbc9811fcb078823f',
      ]
      if (arr.findIndex((v) => v == row.id) != -1) {
        return false
      } else {
        return true
      }
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.queryPage();
    },
  },
  computed: {
    ...mapGetters({
      screenWidth: "getscreenWidth",
      screenHeight: "getscreenHeight",
      Collapse: "getsCollapse",
    }),
    style() {
      let num = 0;
      if (this.Collapse) {
        num = this.screenWidth - 124;
      } else {
        num = this.screenWidth - 220;
      }
      return "width:" + num + "px;";
    },
  },
};
</script>
<style lang="scss" scoped>
.user-active {
  color: $bg_color;
}
.distribution {
  .dialoginfo-info {
    display: flex;
    padding-top: 24px;
    .dialoginfo-info-div {
      width: 496px;
      height: 517px;
      border: 1px solid #e1e5ed;
      overflow: hidden;
    }
    .dialoginfo-info-title {
      padding-left: 20px;
      height: 48px;
      background: #e1e5ed;
      font-size: calc(#{$font_size} + 2px);
      color: #4b4c4d;
      font-weight: bold;
      line-height: 48px;
    }
    .dialoginfo-info-info {
      height: calc(100% - 85px);
      overflow: auto;
      padding: 20px;
      .user {
        line-height: 24px;
        font-size: $font_size;
        color: #4b4c4d;
        font-weight: 400;
      }
      .user:hover {
        cursor: pointer;
      }
    }
    .dialoginfo-info-info::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    .dialoginfo-info-info::-webkit-scrollbar-track {
      background: rgb(239, 239, 239);
      border-radius: 2px;
    }
    .dialoginfo-info-info::-webkit-scrollbar-thumb {
      background: #bfbfbf;
      border-radius: 10px;
    }
    .dialoginfo-info-info::-webkit-scrollbar-thumb:hover {
      background: #333;
    }
    .dialoginfo-info-info::-webkit-scrollbar-corner {
      background: $bg_color;
    }
    .dialoginfo-info-center {
      width: 40px;
    }
  }
  .dialoginfo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      height: 48px;
      width: 190px;
      border: 1px solid $bg_color;
      font-weight: 400;
      font-size: calc(#{$font_size} + 2px);
      @include discen;

      .iconicon_right {
        margin: 0 8px;
      }
    }
    > div:first-child {
      border-radius: 4px 0 0 4px;
    }
    > div:last-child {
      border-radius: 0 4px 4px 0;
    }
    .active {
      background: $bg_color;
      color: #ffffff;
    }
    .none {
      color: $bg_color;
      background: #ffffff;
    }
  }
}

.business {
  .dialogVisible {
    .el-input,
    .el-select {
      width: 200px;
    }
    .textarea_input {
      padding-top: 10px;
      align-items: flex-start;
      height: 118px;
    }
    .textarea {
      width: 500px;
    }
  }
}
</style>
